<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <%- include("./component/header.html"); %>
    <style>
        .main {
            width: 80vw !important;
            max-width: initial !important;
        }

        #bookImage {
            /* width: 100%; */
            height: auto;
            max-height: 300px;
            margin-bottom: 20px;
        }

        .form-group {
            display: grid;
            grid-template-columns: auto auto;
            width: 250px;
            margin: 0 auto;
            row-gap: 20px;
            place-items: center;
        }

        .btn-register {
            margin-top: 30px;
        }

        .form-group > input {
            height: 25px;
        }

        .btn-submit {
            height: 30px;
            width: 72px;
        }

        .password-tips {
            position: relative;
            border-radius: 5px;
            border: solid black 2px;
            width: 300px;
            margin: 0 auto;
            background-color: aliceblue;
            user-select: none;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <%- include("./component/navbar.html"); %>
    <main class="main">
        <h1><%= headText %></h1>
        <div id="container">
            <div>
                <!-- 用户登录 输入用户名和密码的文本框 -->
                <div class="form">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" id="username" placeholder="用户名">
                        <label for="password">密码</label>
                        <input type="password" id="password" placeholder="密码">
                    </div>
                    <div style="height: 0; margin-top: 6px;">
                        <div class="password-tips" style="display: none;">
                            密码 8 - 16 位均可，可以包含：大小写字母、数字、下划线(_)、英文感叹号(!)、艾特(@)、井号(#)
                        </div>
                    </div>
                    <button class="btn-register">注册</button>
                    <p>
                        <a href="/login">登录</a>
                    </p>
                </div>
            </div>
        </div>
    </main>
    <%- include("./component/footer.html"); %>

    <script>
        $("#password").focus(function () {
            $("#password").attr("type", "text");
            $(".password-tips").fadeIn(150);
        });
        $("#password").blur(function () {
            $("#password").attr("type", "password");
            $(".password-tips").fadeOut(150);
        });
    </script>
    <script>
        localStorageUtils.checkLocalStorage();

        $("#username").val("xiaomo");
        $("#password").val("123456");
        $(".btn-register").click(async function() {
            var username = $("#username").val();
            var password = $("#password").val();

            var visitorId = await getVisitorId();
            postRequest("/user/register", { username: username, password: password, visitorId: visitorId })
                .then(function (response) {
                    var axiosData = response.data;
                    var status = axiosData.status;
                    var data = axiosData.data;

                    if (status === "success") {
                        console.log(data);
                        if(data) {
                            localStorageUtils.userLogin({
                                token: data.token,
                                is_admin: data.group === "ADMIN",
                            });
                            swal("注册成功").then(function () {
                                if (localStorageUtils.getIsAdmin()) {
                                    window.location.href = "/dashboard/admin/index";
                                } else {
                                    window.location.href = "/dashboard/user/index";
                                }
                            });
                        } else {
                            swal("出错啦！");
                        }
                    } else {
                        swal(`出错啦！${data.errMsg} (错误码: ${data.errCode})`);
                    }
                }).catch(function (error) {
                    console.log(error);
                    swal("无法连接到服务器，请检查网络连接！");
                });
        });
    </script>
</body>
</html>